<template>
    <!-- 横向移入的过渡 -->
    <transition
        name="move"
        @after-leave="afterLeave">
        <div class="food" v-if="visible">
            <!-- 组件滑动 -->
            <cube-scroll :data="computedRatings" ref="scroll">
                <div class="food-content">
                    <!-- 商品头图 -->
                    <div class="image-header">
                        <img :src="food.image">
                        <div class="back" @click="hide">
                            <i class="icon-arrow_lift"></i>
                        </div>
                    </div>
                    <!-- 商品内容展示 -->
                    <div class="content">
                        <h1 class="title">{{food.name}}</h1>
                        <div class="detail">
                            <span class="sell-count">月售{{food.sellCount}}份</span>
                            <span class="rating">好评率{{food.rating}}%</span>
                        </div>
                        <div class="price">
                            <span class="now">￥{{food.price}}</span><span
                            class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                        </div>
                        <!-- 购物车控件 -->
                        <div class="cart-control-wrapper">
                            <cart-control @add="addFood" :food="food"></cart-control>
                        </div>
                        <transition name="fade">
                            <div @click="addFirst" class="buy" v-show="!food.countImmediately">
                                加入购物车
                            </div>
                        </transition>
                    </div>
                    <split v-show="food.info"></split>
                    <div class="info" v-show="food.info">
                        <h1 class="title">商品信息</h1>
                        <p class="text">{{food.info}}</p>
                    </div>
                    <split></split>
                    <!-- 评价控件 -->
                    <div class="rating">
                        <h1 class="title">商品评价</h1>
                        <rating-select
                            :ratings="ratings"
                            :onlyContent="onlyContent"
                            :selectType="selectType"
                            :desc="desc"
                            @select="onSelect"
                            @toggle="onToggle">
                        </rating-select>
                        <!-- 评价列表 -->
                        <div class="rating-wrapper">
                            <ul v-show="computedRatings && computedRatings.length">
                                <li
                                    v-for="(rating, index) in computedRatings"
                                    class="rating-item border-bottom-1px"
                                    :key="index">
                                    <!-- 用户信息 -->
                                    <div class="user">
                                        <span class="name">{{rating.username}}</span>
                                        <img :src="rating.avatar" width="12" height="12" class="avatar">
                                    </div>
                                    <!-- 评价时间 -->
                                    <div class="time">{{format(rating.rateTime)}}</div>
                                    <!-- 评价内容 带拇指 -->
                                    <p class="text">
                                        <span :class="{
                                                'icon-thumb_up': rating.rateType===0,
                                                'icon-thumb_down': rating.rateType===1
                                            }">
                                        </span>
                                        {{rating.text}}
                                    </p>
                                </li>
                            </ul>
                            <div class="no-rating" v-show="!computedRatings || !computedRatings.length">
                                暂无相关评价
                            </div>
                        </div>
                    </div>
                </div>
            </cube-scroll>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
    import popupMinxin from 'common/mixins/popup'
    import ratingMixin from 'common/mixins/rating'
    import { refreshMixin } from 'common/mixins/scroll'
    import Split from 'components/split/split'
    import CartControl from 'components/cart-control/cart-control'
    import RatingSelect from 'components/rating-select/rating-select'

    // 自定义事件
    const EVENT_LEAVE = 'leave'
    const EVENT_ADD = 'add'
    // countLate延迟时间
    const COUNT_LATE_TIME = 500

    export default {
        mixins: [popupMinxin, ratingMixin, refreshMixin],
        name: 'food',
        props: {
            // 当前展示的商品
            food: {
                type: Object
            }
        },
        data() {
            return {
                // 商品评价类型文案
                desc: {
                    all: '全部',
                    positive: '推荐',
                    negative: '吐槽'
                }
            }
        },
        computed: {
            // 评价列表
            ratings() {
                return this.food.ratings
            }
        },
        methods: {
            afterLeave() {
                this.$emit(EVENT_LEAVE)
            },
            addFirst(event) {
                // 防止按钮在退出动画的过程中被反复点击
                if (this.food.count) {
                    return
                }
                // 触发添加商品事件
                this.$emit(EVENT_ADD, event.target)
                // countImmediately的添加延迟更新
                // 调用set方法使得为对象新增属性成为响应式
                this.$set(this.food, 'countImmediately', 1)
                let _this = this
                // 保证food在购物车小球下落后才得到更新
                setTimeout(() => {
                    _this.$set(_this.food, 'count', 1)
                }, COUNT_LATE_TIME)
            },
            addFood(target) {
                // 转发来自cart的添加商品事件
                this.$emit(EVENT_ADD, target)
            }
        },
        components: {
            Split,
            CartControl,
            RatingSelect
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin.styl"
    // 整体样式
    .food
        position: fixed
        left: 0
        top: 0
        bottom: 48px
        z-index: 30
        width: 100%
        background: $color-white
        // 进入、离开过渡
        &.move-enter-active, &.move-leave-active
            transition: all 0.3s linear
        &.move-enter, &.move-leave-active
            transform: translate3d(100%, 0, 0)
        // 商品头图
        .image-header
            position: relative
            width: 100%
            height: 0
            // padding-top 会按宽度进行百分比
            // 先设置一个宽高都为百分百的wrapper占位
            // 再在img中设置 absolute 从而防止页面抖动
            padding-top: 100%
            img
                position: absolute
                top: 0
                left: 0
                width: 100%
                height: 100%
            // 返回按钮
            .back
                position: absolute
                top: 10px
                left: 0
                .icon-arrow_lift
                    display: block
                    padding: 10px
                    font-size: $fontsize-large-xx
                    color: $color-white
        // 商品基本信息
        .content
            position: relative
            padding: 18px
            .title
                line-height: 14px
                margin-bottom: 8px
                font-size: $fontsize-medium
                font-weight: 700
                color: $color-dark-grey
            // 月售、好评率
            .detail
                margin-bottom: 18px
                line-height: 10px
                height: 10px
                .sell-count, .rating
                    font-size: $fontsize-small-s
                    color: $color-light-grey
                .sell-count
                    margin-right: 12px
            .price
                line-height: 24px
                font-weight: 700
                .now
                    margin-right: 8px
                    font-size: 14px
                    color: $color-red
                .old
                    text-decoration: line-through
                    font-size: $fontsize-small-s
                    color: $color-light-grey
            // 购物车控件、加入购物车按钮
            .cart-control-wrapper
                position: absolute
                right: 12px
                bottom: 12px
            .buy
                position: absolute
                right: 18px
                bottom: 18px
                z-index: 10
                height: 24px
                line-height: 24px
                padding: 0 12px
                box-sizing: border-box
                border-radius: 12px
                font-size: $fontsize-small-s
                color: $color-white
                background: $color-blue
                opacity: 1
                &.fade-enter-active, &.fade-leave-active
                    transition: all 0.3s
                &.fade-enter, &.fade-leave-active
                    opacity: 0
                    z-index: -1
        // 商品富文本信息
        .info
            padding: 18px
            .title
                line-height: 14px
                margin-bottom: 6px
                font-size: $fontsize-medium
                color: $color-dark-grey
            .text
                line-height: 24px
                padding: 0 8px
                font-size: $fontsize-small
                color: $color-grey
        // 商品评价区块
        .rating
            padding-top: 18px
            .title
                line-height: 14px
                margin-left: 18px
                font-size: $fontsize-medium
                color: $color-dark-grey
            // 评价列表
            .rating-wrapper
                padding: 0 18px
                .rating-item
                    position: relative
                    padding: 16px 0
                    &:last-child
                        border-none()
                    // 用户头像
                    .user
                        position: absolute
                        right: 0
                        top: 16px
                        display: flex
                        align-items: center
                        line-height: 12px
                        .name
                            margin-right: 6px
                            font-size: $fontsize-small-s
                            color: $color-light-grey
                        .avatar
                            border-radius: 50%
                    // 评价时间
                    .time
                        margin-bottom: 6px
                        line-height: 12px
                        font-size: $fontsize-small-s
                        color: $color-light-grey
                    // 评价内容
                    .text
                        line-height: 16px
                        font-size: $fontsize-small
                        color: $color-dark-grey
                        // 评价icon
                        .icon-thumb_up, .icon-thumb_down
                            margin-right: 4px
                            line-height: 16px
                            font-size: $fontsize-small
                        .icon-thumb_up
                            color: $color-blue
                        .icon-thumb_down
                            color: $color-light-grey
                // 没有评价
                .no-rating
                    padding: 16px 0
                    font-size: $fontsize-small
                    color: $color-light-grey
</style>
